import { Input, Menu, MenuProps, Select, Space } from "antd";
import enUS from "antd/locale/en_US";
import zhCN from "antd/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import style from "./index.module.scss";
import { SearchOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import User from "@/components/User";
import { useDispatch, useSelector } from "react-redux";
import { changLocale } from "@/store/locale";
import { RouteType } from "@/types/route";
import Routes from "@/router/router";
dayjs.locale("en");
type MenuItem = Required<MenuProps>["items"][number];

function disposeMenuItem(list: RouteType[], parentPath = ""): MenuItem[] {
	return list
		.filter((item) => item.isMenu)
		.map((item) => {
			// 拼接路径
			let path = parentPath;
			// 如果不是根路由
			if (parentPath !== "" && item.path !== "") {
				path += "/";
			}
			if (item.path !== "") {
				path += item.path;
			}
			const children = item.children
				? disposeMenuItem(item.children, path)
				: [];
			return {
				label: item.label,
				key: "/" + path,
				icon: item.icon,
				children: children.length > 0 ? children : undefined
			};
		});
}

function HeaderDate() {
	const [date, setDate] = useState(dayjs().format("YYYY-MM-DD HH:mm:ss"));
	useEffect(() => {
		const timer = setInterval(() => {
			setDate(dayjs().format("YYYY-MM-DD HH:mm:ss"));
		}, 1000);
		return () => {
			clearInterval(timer);
		};
	}, []);
	return <div className={style.date}>{date}</div>;
}
const items = disposeMenuItem(Routes);

function Header() {
	const locale = useSelector((state: RootState) => state.localeStore.locale);
	const dispatch = useDispatch();
	const handleChange = (value: string) => {
		switch (value) {
			case "en":
				dispatch(changLocale(enUS));
				dayjs.locale("en");
				break;
			case "zh-cn":
				dispatch(changLocale(zhCN));
				dayjs.locale("zh-cn");
				break;
			default:
				break;
		}
	};
	const location = useLocation(); // 获取当前路由信息
	const [current, setCurrent] = useState(location.pathname);
	useEffect(() => {
		console.log(location);
		setCurrent(location.pathname);
	}, [location]);

	const navigate = useNavigate();
	const onClick: MenuProps["onClick"] = (e) => {
		setCurrent(e.key);
		navigate(e.key);
	};
	return (
		<div className={style.header}>
			<Menu
				theme="dark"
				className={style.menu}
				onClick={onClick}
				selectedKeys={[current]}
				mode="horizontal"
				items={items}
			/>
			<Input
				className={style.search}
				placeholder="搜索"
				prefix={<SearchOutlined />}
			/>
			<Space className={style.user} size={8}>
				<User />
				<Select
					defaultValue={locale.locale}
					style={{ width: 80 }}
					onChange={handleChange}
					options={[
						{ value: "en", label: "EN" },
						{ value: "zh-cn", label: "CN" }
					]}
				/>
				<HeaderDate />
			</Space>
		</div>
	);
}

export default Header;
